﻿<%@ Page Title="" Language="C#" MasterPageFile="~/master/Home.Master" AutoEventWireup="true" CodeBehind="tripdetail.aspx.cs" Inherits="TripsLogic.tripdetail" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" href="css/fontawesome/css/font-awesome.min.css" />
<style type="text/css">
 .titleName{
	 margin-right:25px;
	 float:left;
	 width:120px;
	font-size: 18px;
	font-weight: normal;
 }
  .map
  {
    padding-top: 10px;
    font-size: 20px;
    color: #d5d5d5;
   
  }
  .itemDetail
 {
	margin: 20px 20px 20px 20px;
    font-size: 18px;
	font-weight: normal;
	width: 500px;
	
 }
 .titleTrip
 {
    
    font-size: 20px;
    color: #d5d5d5;
    font-weight: normal;
    line-height: 1.2em;
    padding: 35px 0 0px 0px;
    width: 550px;
 }
  icoPre
  {
      color: #0C3;
      background-color:#F03;
  }
  .address
 {
    font-size: 18x;
    color: #F60;
    font-weight: normal;
    padding: 35px 0 0px 0px;
 }
  .well
 {
	width: 560px;

 }
 .driver
 { 
    font-size: 18px;
    color: #d5d5d5;
    font-weight: normal;
    float:left; width:127px; text-align:center;
 }
 .passager
 {
    font-size: 18px;
    color: #d5d5d5;
    font-weight: normal;
    
 }

.buttoncss {
	-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	box-shadow:inset 0px 1px 0px 0px #fce2c1;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );
	background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
	background-color:#ffc477;
	-webkit-border-top-left-radius:16px;
	-moz-border-radius-topleft:16px;
	border-top-left-radius:16px;
	-webkit-border-top-right-radius:16px;
	-moz-border-radius-topright:16px;
	border-top-right-radius:16px;
	-webkit-border-bottom-right-radius:16px;
	-moz-border-radius-bottomright:16px;
	border-bottom-right-radius:16px;
	-webkit-border-bottom-left-radius:16px;
	-moz-border-radius-bottomleft:16px;
	border-bottom-left-radius:16px;
	text-indent:0;
	border:1px solid #eeb44f;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
	font-style:normal;
	height:50px;
	line-height:50px;
	width:136px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #cc9f52;
}
.buttoncss:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );
	background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
	background-color:#fb9e25;
}.buttoncss:active {
	position:relative;
	top:1px;


 </style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&amp;language=en&amp;region=VN&amp;libraries=places"></script>
<script type="text/javascript" >
    var placeSearch, start, destination;
    var map;
    var directionsService = new google.maps.DirectionsService();
    var placeSearch, txtstart, txtend;

    function initialize() {


        var rendererOptions = {
            draggable: true
        };

        directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

        var my_place = new google.maps.LatLng(17.435979, 78.448196);
        var myOptions = {
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: my_place
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        directionsDisplay.setMap(map);
    }

    function geolocate() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                var geolocation = new google.maps.LatLng(
          position.coords.latitude, position.coords.longitude);
                txtstart.setBounds(new google.maps.LatLngBounds(geolocation,
          geolocation));
            });
        }
    }

    function caldistance() {
        var origin = $('#content_start').html(),
    destination = $('#content_destination').html(),
    service = new google.maps.DistanceMatrixService();
        
        service.getDistanceMatrix(
    {
        origins: [origin],
        destinations: [destination],
        travelMode: google.maps.TravelMode.DRIVING,
        avoidHighways: false,
        avoidTolls: false
    },
    callback
);

    function callback(response, status) {
            //var dist = document.getElementById("results");
        //var dist = $('#content_results').html();
        if (status == "OK") {
            $('#content_results').html(response.rows[0].elements[0].distance.text);
                //dist.text = response.rows[0].elements[0].distance.text;
            } else {
                $('#content_results').html("Error");
            }
        }
    }

    function calcRoute() {
        var start = $('#content_start').html();
        var end = $('#content_destination').html();
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    }


    $(function () {
        caldistance();
        initialize();
    });

  
</script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="content" runat="server">
    <article id="content">
				<div class="wrapper line1">
					<section class="grid_9">
						<h2><asp:Literal ID="litGoogleMap" runat="server"></asp:Literal></h2>
						<div id='map_canvas' style='width: 345px; height: 375px'></div>

                          <asp:Label ID="start" runat="server" Text="" style="display:none"></asp:Label>
                          <asp:Label ID="destination" runat="server" style="display:none"></asp:Label>
                          <div class="map">
                                <asp:Literal ID="litMapDes" runat="server"></asp:Literal>
                                <asp:Label ID="results" runat="server" ></asp:Label>
                          </div>
                          
                                                               
					</section>
					<section class="grid_14 prefix_1">
						<div id="form_1" method="post">
							<div class="wrapper">
								<section class="grid_7 alpha">
									<p class="titleTrip">
                                        <asp:Literal ID="litFromTitle" runat="server"></asp:Literal>
                                        <asp:Literal ID="litFrom" runat="server"></asp:Literal>
                                        <asp:Literal ID="litToTitle" runat="server"></asp:Literal>
                                        <asp:Literal ID="litTo" runat="server"></asp:Literal>
                                    </p>
                                    <div>
    	                                    <div  class="itemDetail">
        	                                     <div class="titleName"><asp:Literal ID="litPriceTitle" runat="server"></asp:Literal></div> 
                                                 <div>
                                                        <asp:Literal ID="litPriceNo" runat="server">&nbsp;</asp:Literal>
                                                        &nbsp;
                                                        <asp:Literal ID="litCurrency" runat="server"></asp:Literal>
                                                 </div>
                                            </div>
    	                                    <div  class="itemDetail">
        	                                     <div class="titleName"><asp:Literal ID="litTimeTitle" runat="server"></asp:Literal></div> 
                                                 <div><asp:Literal ID="litTime" runat="server">&nbsp;</asp:Literal></div>
                                            </div>
                                            <div  class="itemDetail">
        	                                    <div class="titleName"><asp:Literal ID="litCarTitle" runat="server"></asp:Literal></div>	
                                                <div><asp:Literal ID="litCar" runat="server">&nbsp;</asp:Literal></div>
                                            </div>
    	                                    <div  class="itemDetail">
        	                                    <div class="titleName"><asp:Literal ID="litPreferTitle" runat="server"></asp:Literal></div>
                                                <div>&nbsp;<asp:Literal ID="litPrefer" runat="server">&nbsp;</asp:Literal></div>
                                            </div>
    	                                    <div  class="itemDetail">
        	                                    <div class="titleName"><asp:Literal ID="litCommentTitle" runat="server"></asp:Literal></div>
                                                <div>&nbsp;<asp:Literal ID="litComment" runat="server">&nbsp;</asp:Literal></div>  
                                            </div>
                                    </div>

                                   
                                    <div class="well">
                                        <div style="margin-bottom:10px"> 
                                            <div class="driver">
                                                <asp:Literal ID="litDriverText" runat="server"></asp:Literal>
                                            </div>
                                            <div class="passager">
                                                <span style="margin-left:35px"><asp:Literal ID="listPassengerText" runat="server">&nbsp;&nbsp;
                                                </asp:Literal><asp:Literal ID="litNumAvai" runat="server">&nbsp;&nbsp;
                                                </asp:Literal><asp:Literal ID="litAvaibilityText" runat="server"></asp:Literal></span>
                                            </div>
                                        </div>
                                        <div>
                                            <div style="float:left">
                                                    <asp:Literal ID="litImagDriver" runat="server"></asp:Literal>
                                                    <div style=" margin:5px 5px 5px 5px; font-size: 18px; "  align="center">
                                                    <asp:Literal ID="litDriverName" runat="server"></asp:Literal>
                                                </div>
                                            </div>
                                        </div>
    
                                        <div >
                                            <asp:Literal ID="litguestinfo" runat="server"></asp:Literal>
                                            <%--<div style="float:left; margin-left:10px">
                                                <img src="an.jpg" height="90px" width="90px" />
                                                <div  style=" margin:5px 5px 5px 5px; font-size: 14px;" align="center">
                                                    P1
                                                </div>       
                                            </div>
                                            <div style="float:left; margin-left:10px"">
                                                <img src="an.jpg" height="90px" width="90px" />
                                                    <div  style=" margin:5px 5px 5px 5px;">
                                                    P1
                                                </div>
                                            </div>
                                            <div style="float:left; margin-left:10px"">
                                                <img src="an.jpg" height="90px" width="90px"  />
                                                    <div style=" margin:5px 5px 5px 5px;">
                                                    P1
                                                </div>
                                            </div>
                                            <div style="float:left; margin-left:10px"">
                                                <img src="an.jpg" height="90px" width="90px" />
                                                    <div  style=" margin:5px 5px 5px 5px;" align="center">
                                                    P1
                                                </div>
                                            </div>--%>
                                                 <div style="padding-left:137px; padding-top:132px" >
        	                                        <asp:Literal ID="litJointButton" runat="server"></asp:Literal>
    	                                         </div>
                                        </div>
    
                                    </div>

								</section>
							</div>
						</div>
					</section>
				</div>
			</article>
</asp:Content>
